<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>result</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/result.css">
</head>
<body>
<div class="wrap">
    <div class="fonts">
        <header>游戏结果</header>

        <main>
            <!--获胜方及获胜感言-->
            <div id="winner" class="champion-img"></div>

            <p class="shadow" id="winnerText"></p>

            <!--游戏过程记录-->
        </main>

        <footer>
            <button class="f-btn" id="again">再来一局</button>
            <button class="f-btn" id="share">分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;享</button>
        </footer>
    </div>
</div>
<script src="../jQuery/jquery-3.2.1.js"></script>
<script>
    $(document).ready(function () {
        var players = JSON.parse(sessionStorage.players);//提取保存玩家信息的对象数组
        console.log("玩家对象数组：" + players);
        var game = JSON.parse(sessionStorage.game);//提取保存游戏进程信息的数组
        var capital = JSON.parse(sessionStorage.capital);//获取“汉字数字”数组
        var killed = JSON.parse(sessionStorage.killed);//获取“被杀死的玩家”数组
        var voted = JSON.parse(sessionStorage.voted);//获取“被投死的玩家”数组
        var content = "";

        $("#winner").text(game.winner + "获胜");//显示获胜方是谁

        $("#winnerText").text(game.winnerText);//显示获胜方赞语

        //动态记录游戏过程
        for(var i=0; i < game.day; i++) {
            content += "<div class='shadow'><h4 class='days'>第" + capital[i ] + "天</h4><div class='process'>晚上：" + killed[i] + "号选手被杀死，" + killed[i] + "号的真实身份是" + players[killed[i] - 1].role +  "<br/>白天：" + voted[i] + "号选手被全民放逐，" + voted[i] + "号的真实身份是" + players[voted[i] - 1].role + "</div></div>";
        }

        $("main").append(content);//将游戏过程添加到页面中

        //再来一次
        $("#again").click(function () {
            location.href = "../index.html";
        })

    })
</script>
</body>
</html>